<template>
  <div class="myColumnBox">
    <div :class="`pageLoading ${ssjLoading === true || zbLoading === true ? 'loading' : ''}`">
      <span class="loadIcon"><a-icon type="sync" spin /></span>
    </div>
    <div class="downloadBox" v-if="type === 'render'">
      <a-button type="primary" @click="print">打印</a-button>
      <a-button type="primary" :style="{ marginLeft: '8px' }" @click="downloadExcel">下载</a-button>
      <a-button type="primary" :style="{ marginLeft: '8px' }" @click="reload">刷新</a-button>
    </div>
    <a-row class="table-box">
      <a-col :span="type === 'model' || type === 'target' ? 16 : 24">
        <div
          id="luckysheet"
          :class="{ luckysheetRender: type === 'render', hideName: true }"
          style="margin: 0px; padding: 0px; position: absolute; width: 100%; left: 0px; top: 0; bottom: 0px"
        ></div>
      </a-col>
      <a-col :span="8" class="sheet-menu-box" v-if="type === 'model' || type === 'target'">
        <model-template
          :en="en"
          :exportJson="exportJson"
          @uploadExcel="uploadExcel"
          :type="type"
          @setInitRange="setInitRange"
          :coordinate="coordinate"
          @saveModel="saveModel"
          @downloadExcel="downloadExcel"
        ></model-template>
        <a-tabs v-if="type === 'target'" :activeKey="activeKey" class="mySysBox" @change="handleChangeTab">
          <a-tab-pane key="detail" tab="模板信息" class="sys-item">
            <template-detail :exportJson="exportJson"></template-detail>
          </a-tab-pane>
          <!-- <a-tab-pane key="range" tab="指标区域配置" class="sys-item">
            <range-sys @save="saveRange" :rangeInfo="rangeInfo" @edit="editRange" :status="rangeSys"></range-sys>
          </a-tab-pane> -->
          <a-tab-pane key="target" tab="指标配置" class="sys-item">
            <a-collapse accordion :activeKey="targetActive" @change="changTargetActive" class="mySysBox">
              <a-collapse-panel key="range" header="区域配置" class="sys-item">
                <range-sys @save="saveRange" :rangeInfo="rangeInfo" @edit="editRange" :status="rangeSys"></range-sys>
              </a-collapse-panel>
              <a-collapse-panel key="target" header="指标配置" class="sys-item">
                <a-form :form="formSearch" class="myFormSearch" @submit="handleSearch" layout="inline">
                  <a-row>
                    <a-col :span="12">
                      <a-form-item
                        :label-col="formItemLayout.labelCol"
                        :wrapper-col="formItemLayout.wrapperCol"
                        label="指标名称"
                      >
                        <a-input v-decorator="['zbmc']" placeholder="请填写指标名称" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12" style="text-align: right">
                      <a-form-item>
                        <a-button type="primary" html-type="submit">查询</a-button>
                        <a-button :style="{ marginLeft: '8px' }" @click="handleReset">清空</a-button>
                        <a-button :style="{ marginLeft: '8px' }" type="primary" @click="showModalMechanism"
                          >新建指标</a-button
                        >
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
                <a-table
                  size="small"
                  :columns="columns"
                  :data-source="dataFilter"
                  :rowKey="(record) => record.id"
                  class="table-target"
                  :customRow="customRow"
                  :pagination="{
                    pageSize: 10,
                    onChange: (page) => pageChange(page),
                    ...pagination,
                  }"
                >
                </a-table>
                <a-descriptions
                  :title="autoTarget.id ? titleTemaplate({ lwmc: '自动代出区', ...detail }, 'zbpz') : '自动代出区'"
                  bordered
                  size="small"
                  :column="2"
                >
                  <a-descriptions-item label="指标名称">
                    {{ autoTarget.zbmc }}
                  </a-descriptions-item>
                  <a-descriptions-item label="指标描述">
                    {{ autoTarget.zbms }}
                  </a-descriptions-item>
                  <a-descriptions-item label="行">
                    {{
                      typeof detail.r === 'number' || (typeof detail.r === 'string' && detail.r !== '')
                        ? detail.r - 0 + 1
                        : typeof detail.row_focus === 'number' ||
                          (typeof detail.row_focus === 'string' && detail.row_focus !== '')
                        ? detail.row_focus - 0 + 1
                        : ''
                    }}
                  </a-descriptions-item>
                  <a-descriptions-item label="列">
                    {{ columnFilter(detail.c || detail.column_focus) }}
                  </a-descriptions-item>
                  <a-descriptions-item label="数据属性"> {{ autoTarget.sjsx }} </a-descriptions-item>
                  <a-descriptions-item label="数值类型"> {{ autoTarget.bslx }} </a-descriptions-item>
                  <a-descriptions-item label="币种单位"> {{ autoTarget.bzdw }} </a-descriptions-item>
                  <a-descriptions-item label="币种类型"> {{ autoTarget.bzlx }} </a-descriptions-item>
                </a-descriptions>
              </a-collapse-panel>
              <a-collapse-panel key="targetRules" header="指标规则配置" class="sys-item">
                <div class="formRule">
                  <div class="myBoxShadow">
                    <a-form-model
                      ref="targetRule"
                      :model="targetRule"
                      name="basic"
                      :label-col="{ span: 8 }"
                      :wrapper-col="{ span: 16 }"
                      :rules="validatorTargetRules"
                    >
                      <a-row>
                        <!-- yzzd与gltj都取指标代码，适用范围sinCell -->
                        <a-col :span="12">
                          <a-form-model-item label="指标名称" prop="gltj">
                            <a-select
                              v-model="targetRule.gltj"
                              allow-clear
                              :getPopupContainer="
                                (triggerNode) => {
                                  return triggerNode.parentNode || document.body
                                }
                              "
                            >
                              <a-select-option
                                v-for="item in targetList"
                                :key="item.zbdm"
                                :value="item.zbdm"
                                :label="item.zbmc"
                                >{{ item.zbmc }}</a-select-option
                              >
                            </a-select>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-model-item label="验证公式" prop="yzgs">
                            <a-input v-model="targetRule.yzgs" allow-clear />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                          <a-form-model-item
                            label="提示说明"
                            prop="tssm"
                            :label-col="formRowLayout.labelCol"
                            :wrapper-col="formRowLayout.wrapperCol"
                          >
                            <a-textarea v-model="targetRule.tssm" allow-clear :autoSize="{ minRows: 1, maxRows: 4 }" />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                          <a-form-model-item
                            label="备注"
                            :label-col="formRowLayout.labelCol"
                            :wrapper-col="formRowLayout.wrapperCol"
                          >
                            <a-textarea v-model="targetRule.bz" allow-clear :autoSize="{ minRows: 1, maxRows: 4 }" />
                          </a-form-model-item>
                        </a-col>
                        <!-- <a-col :span="12">
                      <a-form-model-item label="背景颜色">
                        <a-input v-model="targetRule.bjys" allow-clear />
                      </a-form-model-item>
                    </a-col> -->
                      </a-row>
                    </a-form-model>
                  </div>
                </div>
                <div style="text-align: right" class="margin">
                  <a-button v-show="targetRuleItem.id" size="small" @click="clearSjjRuleEdit('target')">
                    取 消
                  </a-button>
                  <a-button
                    type="primary"
                    @click="saveSjjRule('target')"
                    :disabled="dataSysStatus"
                    size="small"
                    class="marginLeft"
                    :loading="sjjRuleStatus"
                  >
                    {{ targetRuleItem.id ? '修 改' : '新 增' }}
                  </a-button>
                </div>
                <div class="myHeadSys myHeadSysHeight">
                  <div class="myHeadSysList">
                    <a-table
                      size="small"
                      :columns="targetRuleColumns"
                      :data-source="targetRuleFilter"
                      :rowKey="(record) => record.id"
                      :loading="sjjRuleStatus"
                    >
                      <span slot="gltj" slot-scope="text">
                        {{ ruleFilter(text, targetList, 'zbdm', 'zbmc') }}
                      </span>
                      <span slot="action" slot-scope="text, record">
                        <a-popconfirm title="确定要删除吗？" @confirm="delReportVerify(record)">
                          <a-button size="small"> 删除 </a-button>
                        </a-popconfirm>
                        <a-button
                          type="primary"
                          :disabled="(targetRuleItem && targetRuleItem.id && true) || false"
                          @click="editSjjRule(record, 'target')"
                          size="small"
                          class="marginLeft"
                        >
                          修改
                        </a-button>
                      </span>
                    </a-table>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
          </a-tab-pane>
          <a-tab-pane key="dataSys" tab="数据集配置" class="sys-item">
            <a-collapse accordion default-active-key="dataSys" class="mySysBox">
              <a-collapse-panel key="dataSys" v-model="sjjActive" header="数据集配置" class="sys-item">
                <div class="formRule">
                  <div class="myBoxShadow">
                    <a-form-model
                      ref="formData"
                      :model="formData"
                      name="basic"
                      :label-col="{ span: 8 }"
                      :wrapper-col="{ span: 16 }"
                      :rules="validatorRules"
                    >
                      <a-row>
                        <a-col :span="12">
                          <a-form-model-item label="区域名称" prop="xzmc">
                            <a-input v-model="formData.xzmc" allow-clear />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-model-item label="区域坐标" prop="xzqy">
                            <span class="red" v-show="dataSysStatus">所选区域重合</span
                            >{{
                              dataSysStatus
                                ? ''
                                : dataSysRange && dataSysRange.column && dataSysRange.column.length > 0
                                ? `${columnFilter(dataSysRange.column[0])}${dataSysRange.row[0] + 1}:${columnFilter(
                                    dataSysRange.column[1]
                                  )}${dataSysRange.row[1] + 1}`
                                : '请框选左侧区域'
                            }}
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-model-item label="数据集表" prop="tableName">
                            <a-select
                              v-model="formData.tableName"
                              allow-clear
                              @change="queryAllColumns"
                              :getPopupContainer="
                                (triggerNode) => {
                                  return triggerNode.parentNode || document.body
                                }
                              "
                            >
                              <a-select-option
                                v-for="item in allFroms"
                                :key="item.CODE"
                                :value="item.CODE"
                                :label="item.NAME"
                                >{{ item.NAME }}</a-select-option
                              >
                            </a-select>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                          <a-form-model-item
                            label="表单字段"
                            prop="columns"
                            :label-col="{ span: 4 }"
                            :wrapper-col="{ span: 20 }"
                          >
                            <a-select
                              v-model="formData.columns"
                              allow-clear
                              mode="multiple"
                              :maxTagCount="3"
                              :getPopupContainer="
                                (triggerNode) => {
                                  return triggerNode.parentNode || document.body
                                }
                              "
                            >
                              <a-select-option
                                v-for="item in allColumns[formData.tableName] || []"
                                :key="item.CODE"
                                :value="item.CODE"
                                :label="item.NAME"
                                >{{ item.NAME }}</a-select-option
                              >
                            </a-select>
                            <span class="red">选择字段顺序与模板展示字段顺序必须一致</span>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                          <a-form-model-item label="SQL语句" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                            <a-input v-model="sqlval" disabled />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                          <a-form-model-item label="合并字段" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                            <a-select
                              v-model="formData.hbcolumns"
                              allow-clear
                              mode="multiple"
                              :maxTagCount="3"
                              :getPopupContainer="
                                (triggerNode) => {
                                  return triggerNode.parentNode || document.body
                                }
                              "
                            >
                              <a-select-option
                                v-for="item in allColumns[formData.tableName] || []"
                                :key="item.CODE"
                                :value="item.CODE"
                                :label="item.NAME"
                                >{{ item.NAME }}</a-select-option
                              >
                            </a-select>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                          <a-form-model-item label="不渲染字段" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                            <a-select
                              v-model="formData.noRenderCol"
                              allow-clear
                              mode="multiple"
                              :maxTagCount="3"
                              :getPopupContainer="
                                (triggerNode) => {
                                  return triggerNode.parentNode || document.body
                                }
                              "
                            >
                              <a-select-option
                                v-for="item in allColumns[formData.tableName] || []"
                                :key="item.CODE"
                                :value="item.CODE"
                                :label="item.NAME"
                                >{{ item.NAME }}</a-select-option
                              >
                            </a-select>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="16">
                          <a-form-model-item label="排序" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                            <a-select
                              v-model="formData.sqlsort"
                              allow-clear
                              mode="multiple"
                              :maxTagCount="3"
                              :getPopupContainer="
                                (triggerNode) => {
                                  return triggerNode.parentNode || document.body
                                }
                              "
                            >
                              <a-select-option
                                v-for="item in allColumns[formData.tableName] || []"
                                :key="item.CODE"
                                :value="item.CODE"
                                :label="item.NAME"
                                >{{ item.NAME }}</a-select-option
                              >
                            </a-select>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                          <a-form-model-item label="" :label-col="{ span: 1 }" :wrapper-col="{ span: 23 }">
                            <a-radio-group v-model="formData.sort" :options="plainOptions" />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                          <a-form-model-item label="数据类型" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
                            <a-select
                              v-model="formData.sjtype"
                              allow-clear
                              :getPopupContainer="
                                (triggerNode) => {
                                  return triggerNode.parentNode || document.body
                                }
                              "
                            >
                              <a-select-option
                                v-for="el in dictSjlx"
                                :key="el.key"
                                :value="el.key"
                                :disabled="sjlxList.some((item) => item.key === el.key)"
                              >
                                {{ el.title }}
                              </a-select-option>
                            </a-select>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-model-item label="" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
                            <a-select
                              v-model="formData.zdtype"
                              allow-clear
                              mode="multiple"
                              :maxTagCount="2"
                              :getPopupContainer="
                                (triggerNode) => {
                                  return triggerNode.parentNode || document.body
                                }
                              "
                            >
                              <a-select-option
                                v-for="item in allColumns[formData.tableName] || []"
                                :key="item.CODE"
                                :value="item.CODE"
                                :label="item.NAME"
                                >{{ item.NAME }}</a-select-option
                              >
                            </a-select>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="4">
                          <a-form-model-item label="" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
                            <a-button icon="plus" class="marginLeft" @click="pushsjlxList" />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                          <a-row v-for="item in sjlxList" :key="item.key">
                            <a-col :span="4"></a-col>
                            <a-col :span="4">
                              <a-form-model-item label="" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
                                <a-select
                                  v-model="item.key"
                                  disabled
                                  :getPopupContainer="
                                    (triggerNode) => {
                                      return triggerNode.parentNode || document.body
                                    }
                                  "
                                >
                                  <a-select-option v-for="el in dictSjlx" :key="el.key" :value="el.key">
                                    {{ el.title }}
                                  </a-select-option>
                                </a-select>
                              </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                              <a-form-model-item label="" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
                                <a-select
                                  v-model="item.value"
                                  disabled
                                  mode="multiple"
                                  :maxTagCount="2"
                                  :getPopupContainer="
                                    (triggerNode) => {
                                      return triggerNode.parentNode || document.body
                                    }
                                  "
                                >
                                  <a-select-option
                                    v-for="item in allColumns[formData.tableName] || []"
                                    :key="item.CODE"
                                    :value="item.CODE"
                                    :label="item.NAME"
                                    >{{ item.NAME }}</a-select-option
                                  >
                                </a-select>
                              </a-form-model-item>
                            </a-col>
                            <a-col :span="4">
                              <a-form-model-item label="" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
                                <a-button icon="minus" class="marginLeft" @click="delsjlxList(item.key)" />
                              </a-form-model-item>
                            </a-col>
                          </a-row>
                        </a-col>
                      </a-row>
                    </a-form-model>
                  </div>
                </div>
                <div style="text-align: right" class="margin">
                  <a-button v-show="sjjpzItem.id" size="small" @click="clearDataRange(true)"> 取 消 </a-button>
                  <a-button
                    type="primary"
                    @click="saveDataRange"
                    :disabled="dataSysStatus"
                    size="small"
                    class="marginLeft"
                  >
                    {{ sjjpzItem.id ? '修 改' : '新 增' }}
                  </a-button>
                </div>
                <div class="myHeadSys">
                  <div class="myHeadSysList">
                    <a-table
                      size="small"
                      :columns="dataSysColumns"
                      :data-source="sjjpzList"
                      :rowKey="(record) => record.id"
                    >
                      <span slot="xzqy" slot-scope="text">
                        {{
                          text
                            ? `${columnFilter(JSON.parse(text).column[0])}${JSON.parse(text).row[0] + 1}:${columnFilter(
                                JSON.parse(text).column[1]
                              )}${JSON.parse(text).row[1] + 1}`
                            : text
                        }}
                      </span>
                      <span slot="action" slot-scope="text, record">
                        <a-popconfirm title="确定要删除吗？" @confirm="deleteSjjpz(record)">
                          <a-button size="small"> 删除 </a-button>
                        </a-popconfirm>
                        <a-button
                          type="primary"
                          :disabled="(sjjpzItem && sjjpzItem.id && true) || false"
                          @click="editSjjpz(record)"
                          size="small"
                          class="marginLeft"
                        >
                          修改
                        </a-button>
                      </span>
                    </a-table>
                  </div>
                </div>
              </a-collapse-panel>
              <a-collapse-panel key="ruleSys" header="数据集规则配置" class="sys-item">
                <div class="formRule">
                  <div class="myBoxShadow">
                    <a-form-model
                      ref="sjjRule"
                      :model="sjjRule"
                      name="basic"
                      :label-col="{ span: 8 }"
                      :wrapper-col="{ span: 16 }"
                      :rules="validatorFormRules"
                    >
                      <a-row>
                        <a-col :span="12">
                          <a-form-model-item label="区域选择" prop="rangeId">
                            <a-select
                              v-model="sjjRule.rangeId"
                              allow-clear
                              :getPopupContainer="
                                (triggerNode) => {
                                  return triggerNode.parentNode || document.body
                                }
                              "
                              @change="getAllColumns"
                            >
                              <a-select-option
                                v-for="item in sjjpzList"
                                :key="item.id"
                                :value="item.id"
                                :label="item.xzmc"
                                >{{ item.xzmc }}</a-select-option
                              >
                            </a-select>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-model-item label="适用范围" prop="syfw">
                            <a-select
                              v-model="sjjRule.syfw"
                              allow-clear
                              :getPopupContainer="
                                (triggerNode) => {
                                  return triggerNode.parentNode || document.body
                                }
                              "
                            >
                              <a-select-option value="0" label="sinCell">sinCell</a-select-option>
                              <a-select-option value="1" label="colCell">colCell</a-select-option>
                            </a-select>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-model-item label="验证字段" prop="yzzd">
                            <a-select
                              v-model="sjjRule.yzzd"
                              allow-clear
                              :getPopupContainer="
                                (triggerNode) => {
                                  return triggerNode.parentNode || document.body
                                }
                              "
                            >
                              <a-select-option
                                v-for="item in allColumns[
                                  this.sjjpzList.filter((item) => item.id === sjjRule.rangeId) &&
                                    this.sjjpzList.filter((item) => item.id === sjjRule.rangeId)[0] &&
                                    this.sjjpzList
                                      .filter((item) => item.id === sjjRule.rangeId)[0]
                                      .sqlval.split('FROM')[1]
                                      .trim()
                                ] || []"
                                :key="item.CODE"
                                :value="item.CODE"
                                :label="item.NAME"
                                >{{ item.NAME }}</a-select-option
                              >
                            </a-select>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-model-item label="验证公式" prop="yzgs">
                            <a-input v-model="sjjRule.yzgs" allow-clear />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                          <a-form-model-item
                            label="筛选条件"
                            prop="gltj"
                            :label-col="formRowLayout.labelCol"
                            :wrapper-col="formRowLayout.wrapperCol"
                          >
                            <a-input v-model="sjjRule.gltj" allow-clear />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                          <a-form-model-item
                            label="提示说明"
                            prop="tssm"
                            :label-col="formRowLayout.labelCol"
                            :wrapper-col="formRowLayout.wrapperCol"
                          >
                            <a-textarea v-model="sjjRule.tssm" allow-clear :autoSize="{ minRows: 1, maxRows: 4 }" />
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                          <a-form-model-item
                            label="备注"
                            :label-col="formRowLayout.labelCol"
                            :wrapper-col="formRowLayout.wrapperCol"
                          >
                            <a-textarea v-model="sjjRule.bz" allow-clear :autoSize="{ minRows: 1, maxRows: 4 }" />
                          </a-form-model-item>
                        </a-col>
                        <!-- <a-col :span="12">
                      <a-form-model-item label="背景颜色">
                        <a-input v-model="sjjRule.bjys" allow-clear />
                      </a-form-model-item>
                    </a-col> -->
                      </a-row>
                    </a-form-model>
                  </div>
                </div>
                <div style="text-align: right" class="margin">
                  <a-button v-show="sjjRuleItem.id" size="small" @click="clearSjjRuleEdit('sjj')"> 取 消 </a-button>
                  <a-button
                    type="primary"
                    @click="saveSjjRule('sjj')"
                    :disabled="dataSysStatus"
                    size="small"
                    class="marginLeft"
                    :loading="sjjRuleStatus"
                  >
                    {{ sjjRuleItem.id ? '修 改' : '新 增' }}
                  </a-button>
                </div>
                <div class="myHeadSys myHeadSysHeight">
                  <div class="myHeadSysList">
                    <a-table
                      size="small"
                      :columns="sjjRuleColumns"
                      :data-source="sjjRuleFilter"
                      :rowKey="(record) => record.id"
                      :loading="sjjRuleStatus"
                    >
                      <span slot="rangeId" slot-scope="text">
                        {{ ruleFilter(text, sjjpzList, 'id', 'xzmc') }}
                      </span>
                      <span slot="action" slot-scope="text, record">
                        <a-popconfirm title="确定要删除吗？" @confirm="delReportVerify(record)">
                          <a-button size="small"> 删除 </a-button>
                        </a-popconfirm>
                        <a-button
                          type="primary"
                          :disabled="(sjjRuleItem && sjjRuleItem.id && true) || false"
                          @click="editSjjRule(record, 'sjj')"
                          size="small"
                          class="marginLeft"
                        >
                          修改
                        </a-button>
                      </span>
                    </a-table>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
          </a-tab-pane>
          <a-tab-pane key="head" tab="栏位配置" class="sys-item">
            <lw-sys
              :headListNosave="headListNosave"
              :headList="headList"
              @saveHead="saveHead"
              :deleteHeadList="deleteHeadList"
            />
          </a-tab-pane>
          <a-tab-pane key="param" tab="附加参数配置" class="sys-item">
            <fjcspz-sys
              :coordinate="coordinate"
              :paramList="paramList"
              :bbdm="exportJson.bbdm || ''"
              :newParamList="newParamList"
              @zbzChange="zbzChange"
              @delCoordinate="deleteCoordinate"
              @set="setCoordinate"
              @save="handleParam"
              @del="deleteCspz"
            ></fjcspz-sys>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
    <rspc-report-item-modal
      v-if="type === 'target'"
      @cancel="visibleMechanism = false"
      @ok="handleSubmitMechanism"
      :visible="visibleMechanism"
      :confirmLoading="confirmLoading"
      :bbdm="exportJson.bbdm || ''"
    >
    </rspc-report-item-modal>
  </div>
</template>

<script>
import LuckyExcel from 'luckyexcel'
import TitleTemplate from './modules/TitleTemplate.vue'
import TemplateDetail from './modules/TemplateDetail.vue'
import RspcReportItemModal from './modules/RspcReportItemModal.vue'
import ModelTemplate from './modules/ModelTemplate.vue'
import RangeSys from './modules/RangeSys.vue'
import FjcspzSys from './modules/FjcspzSys.vue'
import LwSys from './modules/LwSys.vue'
import {
  getTemplateInfo, //获取模板数据
  addTemplateFile, //保存模板内容id和mbnr
  getTemplateList, //获取模板列表
  queryDatasetDataList, //  数据集区域
  loadTreeData,
} from '@/api/websheet.js'
import { Base } from '@/views/websheet/luckysheet/utils/utils.js'
//导入库export.js 这个文件是es6的，不能在普通的HTML文件直接引入js文件（虽然都是js文件，但是有区别，具体请百度es6与es5）！需要把es6转es5才可以直接引入使用！
//导入公共变量方法
import { exportExcel, formItemLayout, formRowLayout, optionsRedonly, en, columnFilter, unColumnFilter } from './export'
// 数据集相关
import { SjjMixin } from './mixin/SjjMixin'
// 指标区域、指标配置、指标修改相关
import { ZbMixin } from './mixin/ZbMixin'
// 附加参数相关
import { FjcsMixin } from './mixin/FjcsMixin'
// 栏位配置相关
import { LwMixin } from './mixin/LwMixin'

export default {
  name: 'Luckysheet',
  mixins: [SjjMixin, ZbMixin, FjcsMixin, LwMixin],
  components: {
    TitleTemplate,
    TemplateDetail,
    RspcReportItemModal,
    ModelTemplate,
    RangeSys,
    FjcspzSys,
    LwSys,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      formItemLayout,
      formRowLayout,
      activeKey: 'detail', //选中tab
      en, //转换坐标用
      type: 'model', //模板：model，指标数据集区域栏位附加参数配置：target
      exportJson: { info: {}, sheets: [] }, //模板所有数据集
      dataIEditStatus: true, //能否修改状态
      sjjIEditStatus: true, //能否修改状态
      calcChain: [], //相关公式
      statusAllChange: true,
      oldDatas: [], //批量修改历史数据
      cmOptions: {
        tabSize: 4,
        mode: 'text/sql',
        theme: 'base16-dark',
        lineNumbers: true,
        line: true,
      },
      drawStatus: false,
      columnFilter, // 列计算A-ZZ
      unColumnFilter, // 列反向计算
      targetActive: 'range',
      parameter: {},
      Base,
      zbLoading: false,
      ssjLoading: false,
      dictSjlx: [],
      plainOptions: [
        { label: '降序', value: 'desc' },
        { label: '升序', value: 'asc' },
      ],
    }
  },
  created() {
    let query = {}
    this.Base.decode(this.$route.query.parameter)
      .split('&')
      .map((item) => {
        let list = item.split(':')
        query[list[0]] = list[1]
      })
    this.parameter = query
    loadTreeData({
      pid: '11170783058900',
      tableName: 'rspc_param_config',
      text: 'name',
      code: 'code',
      pidField: 'pid',
      hasChildField: 'has_child',
      condition: '',
    }).then((res) => {
      if (res.success === true) {
        this.dictSjlx = res.result || []
      } else {
        this.$message.warning('服务器出错!')
      }
    })
  },
  mounted() {
    this.type = this.parameter.type
    if (this.parameter.type === 'render') {
      var t=this.parameter.bbpc.replace("-","").replace("-","");
      // 通过bbdm bbpc获取模板列表
      getTemplateList({ bbdm: this.parameter.bbdm, bbpc: t }).then((res) => {
        if (res.code === 200) {
          let data = res.result || {}
          // 通过id获取模板信息
          this.queryTemplateInfo(data.id || '')
        } else {
          this.$message.warning('服务器出错!')
        }
      })
    } else {
      // 通过模板id进入
      this.queryTemplateInfo(this.parameter.id)
      if (this.parameter.type === 'target') {
        // 获取指标列表
        this.queryReportMeta()
        this.queryAllFrom()
      }
    }
  },
  computed: {
    //指标配置过滤已经配置过的指标
    dataFilter: function () {
      let list = this.data.filter((item) => !this.targetList.some((el) => el.zbdm === item.zbdm && el.hh && el.lh))
      return list
    },
    //指标规则列表
    targetRuleFilter: function () {
      return this.sjjRuleList.filter((item) => item.jclx === '1') || []
    },
    //数据集规则列表
    sjjRuleFilter: function () {
      return this.sjjRuleList.filter((item) => item.jclx === '0') || []
    },
    //SQL语句
    sqlval: function () {
      this.formData = {
        ...this.formData,
        sqlval:
          this.formData.columns && this.formData.columns.length > 0
            ? `SELECT ${this.formData.columns.join(',')} FROM ${this.formData.tableName}`
            : '',
      }
      return this.formData.columns && this.formData.columns
        ? `SELECT ${this.formData.columns.join(',')} FROM ${this.formData.tableName}`
        : ''
    },
  },
  methods: {
    // 刷新页面
    reload() {
      this.queryReportDataList(this.parameter)
      this.getAllDataList(this.exportJson, {}, false)
    },
    // 过滤区域名称value:需要判断的值, list:要过滤的列表,type:要判断的参数名,label:要返回的参数名
    ruleFilter(value, list = [], type, label) {
      return list.some((item) => item[type] === value) ? list.filter((item) => item[type] === value)[0][label] : ''
    },
    //设置模板初始化坐标
    setInitRange() {
      luckysheet.setRangeShow(
        { row: [0, this.coordinate.hzb], column: [0, this.coordinate.zzb] },
        {
          show: true,
          order: this.historyRangeInfo.info.order || '0',
        }
      )
      let range = luckysheet.getRange()
      let item = {
        hzb: range[0].row[1],
        zzb: range[0].column[1],
      }
      const data = { ...this.exportJson, ...item }
      this.exportJson = data
    },
    // 动态header回调删除
    titleTemaplate(data, type) {
      return <title-template data={data} type={type} deleteHeadList={this.deleteHeadList}></title-template>
    },
    zbzChange(record, type) {
      const list = this[type].map((item) => {
        if ((item.vId && item.vId === record.vId) || (item.id && item.id === record.id)) {
          item.csz = `{${record.lx}}`
        }
        return item
      })
      this[type] = list
    },
    // 栏位配置删除/指标配置删除/附加参数配置删除
    deleteHeadList(record, type) {
      switch (type) {
        case 'lwpz':
          this.deleteLwpz(record)
          break
        case 'zbpz':
          this.deleteZbpz(record)
          break
        case 'cspz':
          this.deleteCspz(record)
          break
        default:
          break
      }
    },
    // 绘制excel
    drawExcel(optionsRedonly, data) {
      let _this = this
      let item = {}
      if (data && data.id) {
        item = {
          gridKey: data.id || '',
          title: (data && data.info && data.info.name) || '',
          data: data.sheets || [],
          calcChain: (data && data.calcChain) || null,
        }
      }
      let hook = {}
      if (!(this.parameter && this.parameter.readonly === '1' && this.parameter.type === 'render')) {
        hook = {
          hook: {
            cellEditBefore: _this.cellEditBefore, //进入单元格编辑模式之前触发,双击单元格,敲Enter键,使用API：enterEditMode
            cellMousedownBefore: _this.cellMousedownBefore, //单元格点击前的事件
            // sheetMousemove: _this.sheetMousemove, //鼠标移动事件，可通过cell判断鼠标停留在哪个单元格
            // sheetMouseup: _this.sheetMouseup, //鼠标按钮释放事件，可通过cell判断鼠标停留在哪个单元格
            cellUpdateBefore: _this.cellUpdateBefore, //更新这个单元格值之前触发
            cellUpdated: _this.cellUpdated, //更新这个单元格后触发
            rangeSelect: _this.rangeSelect, //选区操作
            // rangeMoveBefore: _this.rangeMoveBefore, //移动选区前，包括单个单元格
            // rangeEditBefore: _this.rangeEditBefore, //选区修改前
            // cellAllRenderBefore: _this.cellAllRenderBefore, //所有单元格渲染之前执行的方法
            // cellRenderBefore: _this.cellRenderBefore, //单元格渲染前触发
            // cellRenderAfter: _this.cellRenderAfter, //单元格渲染结束后触发
            // rangeCopyBefore: _this.rangeCopyBefore, //选区复制前
            rangePasteBefore: _this.rangePasteBefore, //选区粘贴前
          },
        }
      }
      window.luckysheet.create({
        ...item,
        container: 'luckysheet',
        lang: 'zh',
        ...hook,
        ...optionsRedonly,
      })
      luckysheet.setRangeShow('A1', { show: false })
    },
    // 循环设置公式
    loopCalcChain(list) {
      list.map((item, i) => {
        window.luckysheet.setCellValue(
          item.r - 0,
          item.c - 0,
          { f: item.func[2] },
          {
            isRefresh: i === list.length - 1,
          }
        )
      })
      // 强制计算公式
      if (this.type === 'render') {
        setTimeout(() => {
          luckysheet.refreshFormula()
        }, 200)
      }
    },
    // 获取模板信息
    queryTemplateInfo(id) {
      getTemplateInfo({ id }).then((res) => {
        if (res.code === 200) {
          let info = {}
          if (res.result && res.result.mbnr) {
            info = JSON.parse(res.result.mbnr)
          }
          if (this.type === 'target') {
            // 公式解析设置
            if (info.sheets[0] && info.sheets[0].calcChain && info.sheets[0].calcChain.length > 0) {
              info.sheets[0].calcChain = []
            }
          }
          let item = {
            ...(res.result || {}),
            ...info,
          }
          this.exportJson = item
          if (item.sheets) {
            let options = optionsRedonly
            if (this.type === 'render') {
              // 公式解析设置
              if (info.sheets[0] && info.sheets[0].calcChain && info.sheets[0].calcChain.length > 0) {
                options.calcChain = info.sheets[0].calcChain
                const calcChain = JSON.parse(JSON.stringify(info.sheets[0].calcChain))
                this.calcChain = calcChain
                this.loopFnfluence(calcChain)
              }
              options.allowEdit = this.parameter && this.parameter.readonly != '1' // 是否允许前台编辑
              options.showtoolbarConfig = {
                undoRedo: true,
              }
              queryDatasetDataList({ bbdm: (item && item.bbdm) || this.exportJson.bbdm }).then((res) => {
                if (res.code === 200) {
                  let range = res.result.records || []
                  this.sjjpzList = range
                  this.getAllDataList(item, options, true)
                } else {
                  this.$message.warning('服务器出错!')
                }
              })
            } else if (this.type === 'model') {
              this.drawExcel(null, item)
            } else {
              this.drawExcel(options, item)
            }
          } else {
            this.drawExcel()
          }
          if (this.type === 'target') {
            this.queryReportColInfo(item)
            this.queryReportTargetList({ bbdm: item.bbdm || '' })
            setTimeout(() => {
              this.queryReportItemInfo(item, true)
            }, 200)
            this.getDatasetDataList(item, true)
          }
          if (this.type === 'target' || this.type === 'render') {
            this.queryRangeInfo(item)
            this.queryReportVerify(item)
          }
        } else {
          this.drawExcel()
          this.$message.warning('服务器出错!')
        }
      })
    },
    // 公式解析
    loopFnfluence(calcChain) {
      let dataF = []
      calcChain.map((item) => {
        if (item && item.func && item.func.length > 2) {
          const funcF = item.func[2]
          let isChina = this.ifChina(funcF)
          if (!isChina) {
            let position = { hh: item.r, lh: item.c }
            let f = funcF.replace(/(\=|([a-zA-Z]{2,})|\(|\))/g, '')
            f = f.replace(/\+|\-|\*|\/|\%|\&|\|/g, ',')
            f = this.replaceStr(f)
            let newF = [...new Set(f.split(','))]
            newF.map((item) => {
              let c = item
                .replace(/[A-Z]+/g, function ($1) {
                  return $1 + ','
                })
                .split(',')
              let data = {
                hh: c[1] - 1,
                lh: this.unColumnFilter(c[0]),
                influence: [{ position, formula: funcF }],
              }
              if (dataF.some((item) => item.hh == data.hh && item.lh == data.lh)) {
                let influenceItem = dataF.filter((item) => item.hh == data.hh && item.lh == data.lh)[0]
                if (influenceItem.influence) {
                  if (
                    !influenceItem.influence.some(
                      (el) => el.position.hh === position.hh && el.position.lh === position.lh
                    )
                  ) {
                    influenceItem.influence.push({ position, formula: funcF })
                  }
                } else {
                  influenceItem.influence = [{ position, formula: funcF }]
                }
              } else {
                dataF.push(data)
              }
            })
          }
        }
      })
      let obj = {}
      dataF.map((item) => {
        obj[`${item.hh}${item.lh}`] = item
      })
      this.influenceFunc = obj
    },
    // 是否是汉字公式
    ifChina(s) {
      const reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
      if (reg.test(s)) {
        return true
      } else {
        return false
      }
    },
    // 解析公式得到子项 获取所有（单词+数字）单个坐标和（单词+数字:单词+数字)的区域坐标
    analyticalFnfluence(record, select, hasId = [], noHasId = []) {
      let f = Array.from(new Set(select.f.match(/((([A-Z]{1,})+\d*):(([A-Z]{1,})+\d*))|([A-Z]{1,})\d{1,}/g))).join(',')
      f = this.replaceStr(f)
      let newF = [...new Set(f.split(','))]
      let status = true
      let position = { hh: select.r, lh: select.c }
      newF.map((item) => {
        let c = item
          .replace(/[A-Z]+/g, function ($1) {
            return $1 + ','
          })
          .split(',')
        let data = {
          hh: c[1] - 1,
          lh: this.unColumnFilter(c[0]),
        }
        if (this.targetList.some((item) => item.hh == data.hh && item.lh == data.lh)) {
          let influenceItem = this.targetList.filter((item) => item.hh == data.hh && item.lh == data.lh)[0]
          if (influenceItem.influence) {
            influenceItem.influence = JSON.parse(influenceItem.influence)
            if (
              !influenceItem.influence.some((el) => el.position.hh === position.hh && el.position.lh === position.lh)
            ) {
              influenceItem.influence.push({ position, formula: select.f })
            }
          } else {
            influenceItem.influence = [{ position, formula: select.f }]
          }
          influenceItem.influence = JSON.stringify(influenceItem.influence)
          hasId.push(influenceItem)
        } else {
          status = false
          return
        }
      })
      if (status) {
        this.editReportItem(hasId, noHasId, record)
      } else {
        this.$message.warning('子项未设置指标')
      }
    },
    // 解析带:范围区间
    replaceStr(f) {
      if (f.indexOf(':') > -1) {
        f = f.replace(/([A-Z]+\d*):([A-Z]+\d*)/g, function (word) {
          let strs = word
            .replace(':', ',')
            .replace(/[A-Z]+/g, function ($1) {
              return $1 + ','
            })
            .split(',')
          let list = []
          for (let i = strs[1] - 0; i <= strs[3] - 0; i++) {
            for (let n = en.indexOf(strs[0]); n <= en.indexOf(strs[2]); n++) {
              list.push(en[n] + i)
            }
          }
          return list.join(',')
        })
        if (f.indexOf(':') > -1) {
          return this.replaceStr(f)
        } else {
          return f
        }
      } else {
        return f
      }
    },
    changTargetActive(key) {
      this.targetActive = key
      const _this = this
      if (this.rangeSys === true) {
        let newRepeat = this.filterRepeat()
        this.$confirm({
          zIndex: 19999,
          title: '是否保存？',
          content: '区域配置数据未保存',
          onOk() {
            _this.saveRange(null, newRepeat)
          },
          onCancel() {
            _this.drawStatus = false
            _this.saveRange(_this.historyRangeInfo)
          },
        })
      }
      const range = JSON.parse(JSON.stringify(this.historyRangeInfo.range))
      if (key === 'range') {
        this.drawStatus = true
        this.clearRange(range)
        luckysheet.setRangeShow(range, {
          show: true,
          order: this.historyRangeInfo.info.order || '0',
        })
      } else {
        // this.detail = {}
        // if (this.rangeSys === false) {
        //   luckysheet.setRangeShow(range, {
        //     show: false,
        //     order: this.historyRangeInfo.info.order || '0',
        //   })
        // }
        if (this.drawStatus) {
          this.drawStatus = false
          if (!this.rangeSys) {
            let list = this.rangeFilter(range)
            list = JSON.parse(JSON.stringify(list))
            this.drawRange(list)
          }
        }
      }
    },
    // 切换tab
    handleChangeTab(activeKey) {
      const _this = this
      if (this.rangeSys === true && this.targetActive === 'range') {
        let newRepeat = this.filterRepeat()
        this.$confirm({
          zIndex: 19999,
          title: '是否保存？',
          content: '区域配置数据未保存',
          onOk() {
            _this.saveRange(null, newRepeat)
          },
          onCancel() {
            _this.drawStatus = false
            _this.saveRange(_this.historyRangeInfo)
          },
        })
      }
      this.activeKey = activeKey
      const range = JSON.parse(JSON.stringify(this.historyRangeInfo.range))
      if (activeKey === 'target') {
        if (this.targetActive === 'range') {
          this.drawStatus = true
          this.clearRange(range)
          luckysheet.setRangeShow(range, {
            show: true,
            order: this.historyRangeInfo.info.order || '0',
          })
        } else {
          // this.detail = {}
          // if (this.rangeSys === false) {
          //   luckysheet.setRangeShow(range, {
          //     show: false,
          //     order: this.historyRangeInfo.info.order || '0',
          //   })
          // }
          if (this.drawStatus) {
            this.drawStatus = false
            let list = this.rangeFilter(range)
            list = JSON.parse(JSON.stringify(list))
            this.drawRange(list)
          }
        }
      }
      if (activeKey === 'dataSys') {
        this.sjjpzItem = {}
        this.detail = {}
        if (this.dataSysRange && this.dataSysRange.column && this.dataSysRange.column.length > 0) {
          const dataRange = JSON.parse(JSON.stringify(this.dataSysRange))
          this.dataSysRange = {}
          this.formData.xzqy = ''
          luckysheet.setRangeShow(dataRange, {
            show: false,
            order: this.historyRangeInfo.info.order || '0',
          })
        }
      }
      if (activeKey !== 'target' && this.drawStatus && !this.rangeSys) {
        this.drawStatus = false
        let list = this.rangeFilter(range)
        list = JSON.parse(JSON.stringify(list))
        this.drawRange(list)
      }
      if (activeKey === 'head') {
        this.detail = {}
      }
      if (activeKey !== 'persion' || activeKey !== 'param') {
        this.coordinate = {}
      }
    },
    //清除历史区域背景色
    clearRange(list) {
      // 清除历史区域背景色
      if (list.length > 0) {
        list.map((item, index) => {
          let data = luckysheet.getRangeValue({ range: item })
          data.map((el) => {
            el[0].bg = el[0].odlBg
          })
          luckysheet.setRangeValue(data, {
            range: item,
            order: 0,
            isRefresh: index === list.length - 1,
          })
        })
      }
    },
    //设置区域背景色
    drawRange(list = []) {
      list = JSON.parse(JSON.stringify(list))
      list.map((item, index) => {
        let data = luckysheet.getRangeValue({ range: item })
        data.map((el, i) => {
          if (el && el.length > 0) {
            el.map((record, n) => {
              record = record || {}
              const odlBg = record && record.bg ? record.bg : '#ffffff'
              record.odlBg = (odlBg === '#FF0000' && '#FF0000') || odlBg
              record.bg = (odlBg === '#FF0000' && '#FF0000') || '#B9D7F8'
              luckysheet.setCellFormat(item.row[0] + i, item.column[0] + n, 'odlBg', record.odlBg)
              luckysheet.setCellFormat(item.row[0] + i, item.column[0] + n, 'bg', record.bg)
            })
          }
        })
        // luckysheet.setRangeValue(data, {
        //   range: item,
        //   order: 0,
        //   isRefresh: index === list.length - 1,
        // })
      })
    },
    //保存模板数据
    saveModel() {
      let allSheets = luckysheet.getAllSheets() //获取所有数据
      if (allSheets.length > 1) {
        this.$message.warning('只能保存一个sheet')
        return false
      }
      let range = {
        qshh: this.exportJson.hzb + 1,
        jshh: allSheets[0].visibledatarow.length - 1,
        qslh: this.exportJson.zzb + 1,
        jslh: allSheets[0].visibledatacolumn.length - 1,
      }
      allSheets = luckysheet.getAllSheets() //重新获取所有数据
      // 删除数据内的多余列
      let visibledatacolumn = allSheets[0].visibledatacolumn
      // 删除数据内的多余行
      let visibledatarow = allSheets[0].visibledatarow
      // 删除行数据

      // if (this.exportJson.hzb + 1 <= visibledatarow.length - 1) {
      //   luckysheet.hideRow(this.exportJson.hzb + 1, visibledatarow.length)
      // }
      // if (this.exportJson.zzb + 1 <= visibledatacolumn.length - 1) {
      //   luckysheet.hideColumn(this.exportJson.zzb + 1, visibledatacolumn.length)
      // }
      if (this.exportJson.hzb + 1 <= visibledatarow.length - 1) {
        // luckysheet.deleteRow(this.exportJson.hzb + 1, visibledatarow.length -1) //删除报错
        // luckysheet.hideRow(this.exportJson.hzb + 1, visibledatarow.length) //隐藏报错
        visibledatarow = visibledatarow.slice(0, this.exportJson.hzb + 1)
      }
      // 删除列数据
      if (this.exportJson.zzb + 1 <= visibledatacolumn.length - 1) {
        // luckysheet.deleteColumn(this.exportJson.zzb + 1, visibledatacolumn.length -1)
        //  luckysheet.hideColumn(this.exportJson.zzb + 1, visibledatacolumn.length)
        visibledatacolumn = visibledatacolumn.slice(0, this.exportJson.zzb + 1)
      }
      // // 删除行数据
      // if (this.exportJson.hzb + 1 <=visibledatarow.length - 1) {
      //   luckysheet.deleteRow(this.exportJson.hzb + 1, visibledatarow.length -1)
      // }
      // // 删除列数据
      // if (this.exportJson.zzb + 1 <= visibledatacolumn.length - 1) {
      //   luckysheet.deleteColumn(this.exportJson.zzb + 1, visibledatacolumn.length -1)
      // }
      // 删除区域外的多余行数据
      let data = allSheets[0].data.slice(0, this.exportJson.hzb + 1)
      // 删除行内的多余列数据
      let newData = data.map((item) => {
        return item.slice(0, this.exportJson.zzb + 1)
      })
      // 重新赋值
      let all = JSON.parse(JSON.stringify(allSheets))
      all[0].visibledatacolumn = visibledatacolumn
      all[0].visibledatarow = visibledatarow
      all[0].data = newData
      let item = {
        id: this.parameter.id,
        hzb: this.exportJson.hzb,
        zzb: this.exportJson.zzb,
        mbnr: JSON.stringify({
          info: this.exportJson.info,
          sheets: all,
        }),
      }

      addTemplateFile(item).then((res) => {
        if (res.code === 200) {
          this.$message.success('保存成功!')
        } else {
          this.$message.warning('服务器出错!')
        }
      })
    },
    //过滤重复选取
    filterRepeat(range) {
      range = range || luckysheet.getRange()
      // if (range.length <= 0) {
      //   return []
      // }
      // let list = JSON.stringify(range)
      // let repeat = []
      // range.map((item, index) => {
      //   let str = JSON.stringify(item)
      //   if (list.indexOf(str > -1)) {
      //     if (!repeat.some((el) => el === str)) {
      //       repeat.push(str)
      //     }
      //   }
      // })
      // let newRepeat = repeat.map((item) => {
      //   let el = JSON.parse(item)
      //   return { row: [el.r, el.r], column: [el.c, el.c] }
      // })
      // return newRepeat
      return range.map((item) => {
        return { row: item.row, column: item.column }
      })
    },
    // 四点坐标碰撞检测
    pointCollision(pointList, record) {
      let status = false
      pointList.map((item) => {
        // if (
        //   item.row <= record.row[0] &&
        //   item.row >= record.row[1] &&
        //   item.column <= record.column[0] &&
        //   item.column >= record.column[1]
        // ) {
        //   status = true
        // }
        if (
          !(
            (item.row > record.row[0] && item.row > record.row[1]) ||
            (item.column > record.column[0] && item.column > record.column[1]) ||
            (item.row < record.row[0] && item.row < record.row[1]) ||
            (item.column < record.column[0] && item.column < record.column[1])
          )
        ) {
          status = true
        }
      })
      return status
    },
    // 区域碰撞检测，第一个参数当前要检测的区域list，第二个参数要对比的区域list
    collisionDetection(range, oldRange, num) {
      if (range.length > 0) {
        let status = false
        range.map((item) => {
          const leftTop = { row: item.row[0], column: item.column[0] }
          const leftBottom = { row: item.row[0], column: item.column[1] }
          const rightTop = { row: item.row[1], column: item.column[0] }
          const rightBottom = { row: item.row[1], column: item.column[1] }
          oldRange.map((el) => {
            let pointStatus = this.pointCollision([leftTop, leftBottom, rightTop, rightBottom], el)
            if (pointStatus) {
              status = true
            }
          })
        })
        oldRange.map((item) => {
          const leftTop = { row: item.row[0], column: item.column[0] }
          const leftBottom = { row: item.row[0], column: item.column[1] }
          const rightTop = { row: item.row[1], column: item.column[0] }
          const rightBottom = { row: item.row[1], column: item.column[1] }
          range.map((el) => {
            let pointStatus = this.pointCollision([leftTop, leftBottom, rightTop, rightBottom], el)
            if (pointStatus) {
              status = true
            }
          })
        })
        //true有碰撞；false无碰撞
        return status
      }
      return false
    },
    // 碰撞检测指区域,range:指标配置区域list，record:数据集配置过滤条件
    rangeFilter(range, record) {
      // 碰撞检测指标配置区域
      let rangeList = range
      // 碰撞检测数据集配置区域合并
      if (this.sjjpzList && this.sjjpzList.length > 0) {
        let list = this.sjjpzList
        if (record && record.id) {
          list = list.filter((item) => item.id !== record.id)
        }
        list.map((item) => {
          let rangeItem = JSON.parse(item.xzqy)
          rangeList.push(rangeItem)
        })
      }
      return rangeList
    },
    //选区操作
    rangeSelect(sheet, range) {
      // // 数据补录
      // if (
      //   this.type === 'render' &&
      //   (range[0].row[0] !== range[0].row[1] || range[0].column[0] !== range[0].column[1])
      // ) {
      //   // 多选下拉填充控制，单选修改由点击事件控制,判断是否在可配置区域
      //   if (this.historyRangeInfo && this.historyRangeInfo.range && this.historyRangeInfo.range.length > 0) {
      //     let statusAll = true
      //     range.map((el) => {
      //       if (el.row[0] === el.row[1]) {
      //         if (el.column[0] === el.column[1]) {
      //           console.log(1)
      //           const status = this.historyRangeInfo.range.some(
      //             (item) => item.row[0] === el.row[0] && item.column[0] === el.column[0]
      //           )
      //           if (!status) {
      //             statusAll = false
      //             return false
      //           }
      //         } else {
      //           console.log(2)
      //           for (var i = el.column[0]; i < el.column[1] + 1; i++) {
      //             const status = this.historyRangeInfo.range.some(
      //               (item) => item.row[0] === el.row[0] && item.column[0] === i
      //             )
      //             if (!status) {
      //               statusAll = false
      //               return false
      //             }
      //           }
      //         }
      //       } else {
      //         for (var i = el.row[0]; i < el.row[1] + 1; i++) {
      //           if (el.column[0] === el.column[1]) {
      //             console.log(3)
      //             const status = this.historyRangeInfo.range.some(
      //               (item) => item.row[0] === i && item.column[0] === el.column[0]
      //             )
      //             if (!status) {
      //               statusAll = false
      //               return false
      //             }
      //           } else {
      //             console.log(4)
      //             for (var n = el.column[0]; n < el.column[1] + 1; n++) {
      //               const status = this.historyRangeInfo.range.some((item) => item.row[0] === i && item.column[0] === n)
      //               if (!status) {
      //                 statusAll = false
      //                 return false
      //               }
      //             }
      //           }
      //         }
      //       }
      //     })
      //     if (!this.statusAllChange) {
      //       this.statusAllChange = true
      //     }
      //     if (!statusAll && this.statusAllChange) {
      //       //不在配置区域执行回撤操作
      //       let undo = document.getElementById('luckysheet-icon-undo')
      //       undo.click()
      //       this.$message.warning('只能选择有效区域内进行配置')
      //       this.statusAllChange = false
      //       return false
      //     } else {
      //       // 在配置区域的拿到修改前对应单元格信息，只修改单元格值
      //       let datas = this.oldDatas
      //       let list = luckysheet.getRangeValuesWithFlatte()
      //       let x = 0
      //       for (let i = range[0].row[0]; i <= range[0].row[1]; i++) {
      //         for (let n = range[0].column[0]; n <= range[0].column[1]; n++) {
      //           list = list.map((item, index) => {
      //             if (index === x) {
      //               item.editInfo = datas[i][n].editInfo ? datas[i][n].editInfo : null
      //               item.targetInfo = datas[i][n].targetInfo ? datas[i][n].targetInfo : null
      //             }
      //             return item
      //           })
      //           x++
      //         }
      //       }
      //       // 需要延迟才能获取公式计算后的值
      //       setTimeout(() => {
      //         this.updateReportDataEditInfos(list)
      //       }, 100)
      //     }
      //   }
      // }
      // 指标配置
      if (this.type === 'target') {
        // 区域判断
        if (
          this.activeKey === 'target' &&
          this.targetActive === 'target' &&
          range &&
          range[0] &&
          range[0].row &&
          range[0].column &&
          (range[0].row[0] !== range[0].row[1] || range[0].column[0] !== range[0].column[1])
        ) {
          this.autoTarget = {}
          this.detail = {}
          this.$message.warning('只能选择有效区域内的一个进行配置')
          return false
        }
        if (
          (this.activeKey === 'target' && this.targetActive === 'range' && this.rangeSys) ||
          (this.activeKey === 'dataSys' && this.sjjActive === 'dataSys')
        ) {
          if (this.activeKey === 'dataSys' && this.sjjActive === 'dataSys' && range.length > 1) {
            this.$message.warning('每次只能配置一片区域')
            this.dataSysRange = {}
            this.formData.xzqy = ''
            // 保存按钮不可用
            this.dataSysStatus = true
            return false
          }
          // 碰撞检测区域
          const rangeList = this.rangeFilter(
            this.activeKey === 'target' && this.targetActive === 'range'
              ? []
              : JSON.parse(JSON.stringify(this.historyRangeInfo.range)),
            this.sjjpzItem
          )
          // 碰撞检测所有使用的区域
          const status = this.collisionDetection(range, rangeList, 2)
          if (status) {
            this.$message.warning('选取重叠')
            if (this.activeKey === 'target' && this.targetActive === 'range') {
              this.rangeInfo = { ...this.rangeInfo, range: [] }
            } else {
              this.dataSysRange = {}
              this.formData.xzqy = ''
              this.dataSysStatus = true
              return false
            }
          } else {
            if (this.activeKey === 'target' && this.targetActive === 'range') {
              // 碰撞检测所有使用的区域
              const status =
                range.length > 1
                  ? this.collisionDetection(
                      [range[range.length - 1]],
                      rangeList.concat(range.filter((item, index) => index < range.length - 1)),
                      3
                    )
                  : false
              let info = luckysheet.getSheet()
              if (status) {
                this.$message.warning('选取重叠')
                this.rangeInfo = {
                  info: { index: info.index, order: info.order || '0' },
                  range: [],
                }
                return false
              } else {
                let newRepeat = this.filterRepeat(range)
                this.rangeInfo = {
                  info: { index: info.index, order: info.order || '0' },
                  range: JSON.parse(JSON.stringify(newRepeat)),
                }
              }
            }
            if (this.activeKey === 'dataSys' && this.sjjActive === 'dataSys') {
              this.dataSysStatus = false
              const data = {
                row: JSON.parse(JSON.stringify(range[0].row)),
                column: JSON.parse(JSON.stringify(range[0].column)),
              }
              this.dataSysRange = data
              this.formData.xzqy = JSON.stringify(data)
            }
          }
        }
        if ((this.activeKey === 'persion' || this.activeKey === 'param') && range.length === 1) {
          let data = range[0]
          // 判断坐标是够使用
          if (data.column[0] === data.column[1] && data.row[0] === data.row[1]) {
            let c = { r: data.row[0], c: data.column[0] }
            let value = luckysheet.getCellValue(c.r, c.c)
            if (value || value === 0 || value === '0') {
              this.coordinate = {}
            } else {
              if (
                this.persionList.some((item) => item.hh == c.r && item.lh == c.c) ||
                this.newParamList.some((item) => item.hh == c.r && item.lh == c.c) ||
                this.paramList.some((item) => item.hh == c.r && item.lh == c.c)
              ) {
                this.coordinate = {}
              } else {
                this.coordinate = c
              }
            }
          } else {
            this.coordinate = {}
          }
        }
      }
      // 模板配置初始化区域坐标
      if (this.type === 'model') {
        let data = range[0]
        if (data.column[0] === data.column[1] && data.row[0] === data.row[1]) {
          this.coordinate = { hzb: data.row_focus, zzb: data.column_focus }
        } else {
          this.coordinate = {}
        }
      }
    },
    //选区修改前
    rangeEditBefore(range, data) {
      if (this.type === 'target' && this.activeKey === 'target' && this.targetActive === 'range') {
        // 碰撞检测所有使用的区域
        const status = this.collisionDetection(range, this.historyRangeInfo.range, 4)
        if (!status) {
          this.$message.warning('只能选择有效区域内的一个进行配置')
          return false
        }
      }
    },
    //移动选区前，包括单个单元格
    rangeMoveBefore(range) {
      return false
      if (this.type === 'target' && this.activeKey === 'target') {
        // 碰撞检测所有使用的区域
        const status = this.collisionDetection(range, this.historyRangeInfo.range)
        if (!status) {
          this.$message.warning('只能选择有效区域内的一个进行配置')
          return false
        }
      }
    },
    //选区复制前
    rangeCopyBefore(range, data) {
      return false
    },
    //选区粘贴前
    rangePasteBefore(range, data) {
      this.$message.warning('不能粘贴')
      return false
    },
    // 双击选择指标配置区域
    cellEditBefore(list) {
      if (this.type === 'target') {
        if (this.activeKey === 'target' && this.targetActive === 'range') {
          let data = list[0]
          data.value = luckysheet.getCellValue(data.row_focus, data.column_focus)
          this.detail = data
          return false
        }
        if (this.activeKey === 'head') {
          return false
        }
      }
      if (this.type === 'render') {
        let item = list[0]
        if (item.row[0] === item.row[1] && item.column[0] === item.column[1]) {
          let range = { row: [item.row[0], item.row[0]], column: [item.column[0], item.column[0]] }
          // luckysheet.setRangeShow(range, { show: false })
          let obj = luckysheet.getRangeValue({ range })[0][0] || {}
          // let obj = luckysheet.getRangeValuesWithFlatte()[0] || {}
          if (obj) {
            if (!(Object.hasOwn(obj, 'datasetData') || Object.hasOwn(obj, 'editInfo') || Object.hasOwn(obj, 'mc'))) {
              this.$message.warning('数据不能修改')
              return false
            }
            // 不是指标的叶子结点数据不能修改
            if (Object.hasOwn(obj, 'editInfo')) {
              if (obj.editInfo.sfyz != '1') {
                this.$message.warning('数据不能修改')
                return false
              }
            }
          } else {
            this.$message.warning('数据不能修改')
            return false
          }
          if (this.dataIEditStatus && this.sjjIEditStatus) {
            this.dataIEditStatus = false
            this.sjjIEditStatus = false
          }
        } else {
          return false
        }
      }
    },
    //所有单元格渲染之前执行的方法
    cellAllRenderBefore(data, sheet) {},
    //更新这个单元格值之前触发
    cellUpdateBefore(r, c, value, isRefresh) {
      if (this.type === 'render' && !this.dataIEditStatus && !this.sjjIEditStatus) {
        let data = luckysheet.getRange()[0] || {}
        const editInfo = data.editInfo || {}
        if (editInfo && editInfo.bslx) {
          if (value !== '' || value !== null) {
            switch (editInfo.bslx) {
              case '1':
                //数值
                if (isNaN(value - 0)) {
                  this.$message.warning('请填写数值')
                  return false
                }
                break
              // case '2':
              //   // 字符串
              //   if (typeof value === 'string') {
              //     this.$message.warning('字符串')
              //     return false
              //   }
              //   break
              case '3':
                // 百分比
                if (!isNaN(value - 0) && /^(\d+|\d+\.\d{1,2})$/.test(value)) {
                  this.$message.warning('请填写百分比(-100.00到100.00)')
                  return false
                }
                break
              case '4':
                // 比例
                if (!isNaN(value - 0) && value - 0 >= 0) {
                  this.$message.warning('请填写比例(大于等于0)')
                  return false
                }
                break
              case '5':
                // 整数
                if (!isNaN(value - 0) && !/^\d+$/.test(value)) {
                  this.$message.warning('请填写整数')
                  return false
                }
                break
              default:
                break
            }
          }
        }
      }
    },
    //更新这个单元格后触发
    cellUpdated(r, c, oldValue, newValue, isRefresh) {
      if (this.type === 'render' && !this.dataIEditStatus && !this.sjjIEditStatus) {
        if (oldValue.m !== newValue.m) {
          let obj = this.influenceFunc[`${r}${c}`]
          setTimeout(() => {
            this.getUpdatedList(obj, { data: JSON.parse(JSON.stringify(newValue)), position: { lh: c, hh: r } })
          }, 300)
        }
      }
    },
    // 获取所有改变的单元格数据
    getUpdatedList(obj, thisValue) {
      let list = [thisValue]
      if (obj && obj.influence.length > 0) {
        this.getUpdatedValue(obj, list)
      }
      let editInfo = []
      let datasetData = []
      list.map((item) => {
        if (this.sheetList.some((el) => el.lh == item.position.lh && el.hh == item.position.hh)) {
          editInfo.push({
            ...this.sheetList.filter((el) => el.lh == item.position.lh && el.hh == item.position.hh)[0],
            zbsz: item.data.v,
          })
        } else {
          this.allDataList.map((el, index) => {
            // 判断是否在区域内
            let range = JSON.parse(this.sjjpzList[index].xzqy)
            // 使用sql语句顺序渲染
            const sqlvalList = this.sjjpzList[index].sqlval.replace('SELECT', '').split('FROM')[0].split(',')
            let lengthList = sqlvalList.filter(
              (str) =>
                !(
                  str === 'ID' ||
                  (this.sjjpzList[index] &&
                    this.sjjpzList[index].noRenderCol &&
                    this.sjjpzList[index].noRenderCol.indexOf('str') > -1)
                )
            )
            if (range.row[0] === range.row[1] && range.column[0] === range.column[1]) {
              // 抛去'ID'和不需渲染的字段是区域坐标
              range.row[1] = el.list.length - 1
              range.column[1] = lengthList.length - 1
            }
            if (
              item.position.hh >= range.row[0] &&
              item.position.hh <= range.row[1] &&
              item.position.lh >= range.column[0] &&
              item.position.lh <= range.column[1]
            ) {
              el.list.map((record, i) => {
                let newItem = {}
                if (i === item.position.hh - range.row[0]) {
                  if (datasetData.length > 0 && datasetData.some((items) => items.id === el.id)) {
                    newItem = datasetData.filter((items) => items.id === el.id)[0]
                  } else {
                    newItem = JSON.parse(JSON.stringify(el))
                    newItem.list = []
                    datasetData = [newItem]
                  }
                  if (
                    newItem &&
                    newItem.list &&
                    newItem.list.length > 0 &&
                    newItem.list.some((items) => items.ID === record.ID)
                  ) {
                    newItem.list.map((items) => {
                      if (items.ID === record.ID) {
                        items[lengthList[item.position.lh].toUpperCase().trim()].value = item.data.m
                      }
                    })
                  } else {
                    let newListItem = JSON.parse(JSON.stringify(record))
                    newListItem[lengthList[item.position.lh].toUpperCase().trim()].value = item.data.m
                    if (newItem.list.length > 0) {
                      newItem.list.push(newListItem)
                    } else {
                      newItem.list = [newListItem]
                    }
                  }
                }
              })
            }
          })
        }
      })
      console.log('%c [ editInfo ]-1808', 'font-size:13px; background:pink; color:#bf2c9f;', editInfo)
      if (editInfo.length > 0) {
        this.updateReportDataEditInfo(editInfo)
      } else {
        this.dataIEditStatus = true
      }
      if (datasetData.length > 0) {
        datasetData = JSON.parse(JSON.stringify(datasetData))
        let newData = datasetData.map((item, index) => {
          // 使用sql语句顺序渲染
          const sqlvalList = this.sjjpzList[index].sqlval.replace('SELECT', '').split('FROM')[0].split(',')
          let lengthList = sqlvalList.filter((str) => str.toUpperCase() !== 'ID')
          let newItem = item
          newItem.list = item.list.map((el) => {
            let newEl = { id: el.ID, data: {} }
            lengthList.map((key) => {
              key = key.trim()
              newEl.data[key] = el[key.toUpperCase()].value
            })
            return newEl
          })
          return newItem
        })
        this.setDatasetData({ json: JSON.stringify(newData) })
      } else {
        this.sjjIEditStatus = true
      }
    },
    // 循环获取公式相关的单元格数据
    getUpdatedValue(obj, list) {
      obj.influence.map((item) => {
        luckysheet.setRangeShow(
          { row: [item.position.hh, item.position.hh], column: [item.position.lh, item.position.lh] },
          { show: false }
        )
        const data = luckysheet.getRangeValue()
        list.push({ data: JSON.parse(JSON.stringify(data[0][0])), position: item.position })
        if (this.influenceFunc[`${item.position.hh}${item.position.lh}`]) {
          this.getUpdatedValue(this.influenceFunc[`${item.position.hh}${item.position.lh}`], list)
        }
        // let value = luckysheet.getCellValue(item.position.hh, item.position.lh)
        // let data = {}
        //  let editInfo = []
        // let datasetData = []
        // if (this.sheetList.some((el) => el.hh == item.position.hh && el.lh == item.position.lh)) {
        //   data = this.sheetList.filter(
        //     (el) =>
        //       (typeof el.hh === 'number' || (typeof el.hh === 'string' && el.hh !== '')) &&
        //       (typeof el.lh === 'number' || (typeof el.lh === 'string' && el.lh !== '')) &&
        //       el.hh == item.position.hh &&
        //       el.lh == item.position.lh
        //   )[0]
        //   data.zbsz = value
        //   editInfo.push(daeta)
        // }
        // if(this.allDataList.some((el) => el.hh == item.position.hh && el.lh == item.position.lh)){
        //   setRangeShow
        // }
      })
    },
    //单元格渲染前触发
    cellRenderBefore(cell, position, sheet, ctx) {},
    //单元格渲染后触发
    cellRenderAfter(cell, position) {},
    // 单击前触发
    cellMousedownBefore(obj, position) {
      console.log('%c [ obj, position ]-2023', 'font-size:13px; background:pink; color:#bf2c9f;', obj, position)
      // 数据补录修改单个单元格时区域判断
      if (this.type === 'render') {
        if (obj) {
          if (!(Object.hasOwn(obj, 'datasetData') || Object.hasOwn(obj, 'editInfo') || Object.hasOwn(obj, 'mc'))) {
            this.$message.warning('数据不能修改')
            return false
          }
          if (Object.hasOwn(obj, 'editInfo')) {
            if (obj.editInfo.sfyz != '1') {
              this.$message.warning('数据不能修改')
              return false
            }
          }
        } else {
          this.$message.warning('数据不能修改')
          return false
        }
        if (this.dataIEditStatus && this.sjjIEditStatus) {
          this.dataIEditStatus = false
          this.sjjIEditStatus = false
        }
      }
      // 指标配置
      if (this.type === 'target') {
        if (this.activeKey === 'target') {
          if (this.targetActive === 'range' && !this.historyRangeInfo) {
            this.rangeSys = true
          }
          if (this.targetActive !== 'range') {
            // 区域判断
            if (this.historyRangeInfo && this.historyRangeInfo.range && this.historyRangeInfo.range.length > 0) {
              // 碰撞检测所有使用的区域
              const status = this.collisionDetection(
                [{ row: [position.r, position.r], column: [position.c, position.c] }],
                this.historyRangeInfo.range,
                1
              )
              if (!status) {
                this.$message.warning('只能选择有效区域内的一个进行配置')
                return false
              }
            } else {
              this.$message.warning('请先配置区域')
              return false
            }
            this.detail = { ...position, ...obj }
            // 自动代出区回显
            if (this.targetList.some((item) => item.hh == position.r && item.lh == position.c)) {
              let bbInfo = this.targetList.filter((item) => item.hh == position.r && item.lh == position.c)[0]
              this.queryReportMetaInfo(bbInfo)
            } else {
              this.autoTarget = {}
            }
          }
        }
        // 栏位配置是否可配置判断
        if (this.activeKey === 'head') {
          let list = this.headListNosave || []
          if (obj && obj.v) {
            if (
              (list.length <= 0 && this.headList.length <= 0) ||
              !(
                list.some((item) => item.lwbm.row == position.r && item.lwbm.column == position.c) ||
                this.headList.some((item) => item.lwbm.row == position.r && item.lwbm.column == position.c)
              )
            ) {
              list.unshift({
                bbdm: this.exportJson.bbdm || '',
                bzlx: '',
                lwbm: { row: position.r, column: position.c },
                lwmc: obj.v,
                sfyx: '1',
                vId: this.vId,
                startrq: this.exportJson.startrq || '',
                endrq: this.exportJson.endrq || '',
              })
              this.vId = this.vId + 1
              this.headListNosave = list
            } else {
              this.$message.warning('栏位已选择')
            }
          } else {
            this.$message.warning('请点击选择正确的栏位')
          }
        }
      }
    },
    //鼠标移动事件，可通过cell判断鼠标停留在哪个单元格
    sheetMousemove(cell, position, sheet, moveState) {},
    //鼠标按钮释放事件，可通过cell判断鼠标停留在哪个单元格
    sheetMouseup(cell, position, sheet, moveState) {
      if (this.type === 'render' && moveState.cellSelectedExtend) {
        // 记录数据补录下拉填充时的单元格数据
        this.oldDatas = JSON.parse(JSON.stringify(sheet.data))
      }
    },
    // 上传
    uploadExcel(evt) {
      let _this = this
      const files = evt.target.files
      if (files == null || files.length == 0) {
        alert('出错啦')
        return
      }
      let name = files[0].name
      let suffixArr = name.split('.'),
        suffix = suffixArr[suffixArr.length - 1]
      if (suffix != 'xlsx') {
        alert('出错啦')
        return
      }
      LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
          alert('数据出错啦!')
          return
        }
        _this.exportJson = exportJson
        window.luckysheet.destroy()
        window.luckysheet.create({
          title: exportJson.info.name,
          data: exportJson.sheets,
          container: 'luckysheet',
          lang: 'zh',
          allowCopy: false, //允许复制
          enableAddRow: false, //允许添加行
          functionButton: false, //功能按钮
          hook: {
            // cellEditBefore: _this.cellEditBefore, //进入单元格编辑模式之前触发,双击单元格,敲Enter键,使用API：enterEditMode
            // cellMousedownBefore: _this.cellMousedownBefore, //单元格点击前的事件
            // cellUpdateBefore: _this.cellUpdateBefore, //更新这个单元格值之前触发
            // cellUpdated: _this.cellUpdated, //更新这个单元格后触发
            // cellMousedownBefore: _this.cellMousedownBefore, //单元格点击前的事件
            rangeSelect: _this.rangeSelect, //选区操作
            // cellRenderBefore: _this.cellRenderBefore, //单元格渲染前触发
            // rangeCopyBefore: _this.rangeCopyBefore, //选区复制前
            // rangePasteBefore: _this.rangePasteBefore, //选区粘贴前
          },
        })
      })
    },
    // 下载
    downloadExcel() {
      // const value = this.selected;;
      //
      // if(value.length==0){
      //     alert("Please select a demo file");
      //     return;
      // }
      //
      // var elemIF = document.getElementById("Lucky-download-frame");
      // if(elemIF==null){
      //     elemIF = document.createElement("iframe");
      //     elemIF.style.display = "none";
      //     elemIF.id = "Lucky-download-frame";
      //     document.body.appendChild(elemIF);
      // }
      // elemIF.src = value;
      exportExcel(
        luckysheet.getAllSheets(),
        (this.exportJson && this.exportJson.info && this.exportJson.info.name) || '下载'
      )
      // testaaa();
    },
    print() {
      window.print()
    },
  },
}
</script>

<style scoped  lang="less">
ul {
  list-style-type: none;
  padding: 0;
}

a {
  color: #42b983;
}
p {
  padding: 0;
  margin: 0;
}
.table-box {
  height: 100%;
  & > div {
    height: 100%;
    &:first-child {
      position: relative;
    }
  }
}
.myMainBox {
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.myColumnBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  .myFormSearch {
    height: 60px;
  }
  .myTableBox {
    flex: 1;
    height: 200px;
  }
}
.sheet-menu-box {
  padding: 20px 0;
  & > div {
    height: 100%;
  }
}
.pageLoading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  line-height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  &.loading {
    z-index: 1000000;
    visibility: inherit;
    opacity: 1;
  }
  .loadIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    & /deep/ .anticon {
      font-size: 24px;
    }
  }
}
.table-target {
  margin: 20px 0;
}
.mySysBox {
  height: 100%;
  display: flex;
  flex-direction: column;
  &.ant-tabs /deep/ .ant-tabs-top-content.ant-tabs-content-animated {
    flex: auto;
    min-height: 200px;
    & > div {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
  .myHeadSys {
    flex: auto;
    min-height: 200px;
    overflow-y: auto;
    &.myHeadSysHeight {
      min-height: auto;
    }
  }
}
.myHeadSysList {
  padding: 8px 8px;
  border-radius: 2px;
  .ant-descriptions {
    box-shadow: 0 0 8px #0000002e;
    border-radius: 2px;
  }
}
.marginTop {
  margin-top: 15px;
}
.marginLeft {
  margin-left: 15px;
}
.marginBtm {
  margin-bottom: 15px;
}
.title {
  padding-bottom: 10px;
  border-bottom: 1px solid #adadad;
}
.luckysheetRender /deep/ #luckysheet-wa-editor {
  height: 0;
  width: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.rightBtn {
  text-align: right;
  margin-bottom: 15px;
}
#luckysheet /deep/ #luckysheet_info_detail {
  #luckysheet_info_detail_title,
  .luckysheet-share-logo,
  #luckysheet_info_detail_update,
  #luckysheet_info_detail_save {
    display: none;
  }
}
.myCode /deep/ .CodeMirror-cursor {
  transform: translateY(10px);
}
.myCode /deep/ .CodeMirror {
  height: 100px;
}
.red {
  color: red;
}
.formRule {
  flex: auto;
  padding: 8px;
  min-height: 200px;
  .myBoxShadow {
    padding: 10px;
    height: 100%;
    box-sizing: border-box;
  }
}
.myBoxShadow {
  box-shadow: 0 0 8px #0000002e;
  border-radius: 4px;
}
.margin {
  margin: 10px 0;
}
.mySysBox.ant-collapse > .ant-collapse-item {
  height: 46px;
  flex: 46px 0;
  overflow: hidden;
  &.ant-collapse-item-active {
    flex: 1;
    display: flex;
    flex-direction: column;
    & /deep/ .ant-collapse-content {
      flex: 1;
      overflow-y: auto;
      & > .ant-collapse-content-box {
        padding: 2px;
      }
    }
  }
}
.downloadBox {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 9999;
}
.hideName /deep/ .sheet-name {
  position: relative;
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    content: '';
  }
}
</style>
